<template>
<div class="tionaos">
    <div class="left" v-show="show">
         <div class="left-box">
             <div class="user-logo" @click="show = false">
                <van-image                             
                  :src="require('@/assets/403802bf52671af9fe374bef30c36189565d9ff222690-j90azd_fw658.png')"                                              
                   fit="cover"                                                                           
                />
                <div class="txt">
                    <h3>Charlotter</h3>
                    <p>Charlotter@yahoo.com</p>
                </div>
             </div>  
            <!--  内容区域-->
            <van-cell-group class="neirongs" >
                <van-cell clickable>
                    <i slot="icon" class="iconfont iconyanjing"></i>
                    <h3 slot="title" class="titleons">我的关注</h3>
                </van-cell> 
                 <van-cell clickable>
                    <i slot="icon" class="iconfont iconicon4"></i>
                    <h3 slot="title" class="titleons">我的收藏</h3>
                </van-cell> 
                 <van-cell clickable>
                    <i slot="icon" class="iconfont iconyouxiang1"></i>
                    <h3 slot="title" class="titleons">我的消息</h3>
                </van-cell> 
                 <van-cell clickable>
                    <i slot="icon" class="iconfont icongouwuche"></i>
                    <h3 slot="title" class="titleons">购物车</h3>
                </van-cell> 
                 <van-cell clickable>
                    <i slot="icon" class="iconfont icondingdan"></i>
                    <h3 slot="title" class="titleons">我的订单</h3>
                </van-cell> 
                 <van-cell clickable>
                    <i slot="icon" class="iconfont iconicon_youhuiquan"></i>
                    <h3 slot="title" class="titleons">优惠券</h3>
                </van-cell> 
                 <van-cell clickable>
                    <i slot="icon" class="iconfont iconkabao"></i>
                    <h3 slot="title" class="titleons">我的卡包</h3>
                </van-cell> 
                 <van-cell clickable>
                    <i slot="icon" class="iconfont iconshezhi"></i>
                    <h3 slot="title" class="titleons">设置</h3>
                </van-cell>   
            </van-cell-group>
        </div>
    </div>
    <div class="contains" :class="{lefts:show}" :style="{left:oj+'px'}">     
        <!-- 这是头部部分 -->
        <div class="search">
                <van-search v-model="value"  show-action placeholder="搜索">
                   <i slot="left-icon" class="iconfont iconShapes iconShapess"></i>
                   <img slot="left" src="~@/assets/logo2.png" class="img-a1"  @click="oms"/>
                   <img slot="action" src="~@/assets/logo3.png" class="img-a2"/>
               </van-search>
        </div>     
       
        <!-- 这是标签也 -->
            <div class="main">
                    <van-tabs v-model="active" title-inactive-color="#aeaeae" title-active-color="#262626">
                        <!-- 第一个 -->
                        <van-tab v-for="item in this.$store.state.title" :key="item.id">
                            <p slot="title" class="titiles">{{item.title}}</p>                       
                            <one v-if="item.id === 0">
                            </one><liwu v-else :titles='item.id'>
                            </liwu>
                        </van-tab>
                        <!-- 第二个 -->               
                    </van-tabs>               
            </div>       
    </div>
</div>    
</template>
<script>
import liwu from './liwu/index.vue'
import one from './one/one.vue'
import { mapActions } from 'vuex'
export default {
    data:function(){
        return {
            value:'',
            active:'',
            show: false,
            oj:0                       
        }
    },
    components:{
        liwu,
        one
    },
    methods:{ 
        oms(){
            const that = this
            this.show = true
            var num = 0
            const is = setInterval(function(){
                if (num > 500){
                    clearInterval(is)
                }
                num = num + 4
                that.oj = num
            },0.1)        
        },
        ...mapActions(['getlist','gettitle'])
    },
    created(){      
            this.getlist()
            this.gettitle()
    }
}
</script>

<style lang="less">
body{
    background: #ffffff;
}
 [class*=van-hairline]::after{
            border: none;
        }
.van-tabs__content{
    overflow-y: auto;
    height: 78vh;
}
.tionaos{
    overflow: hidden;
.left{
    position: absolute;
    top: 0px;
    left: 0px;
    bottom: 0px;
    padding: 164px  46px 98px 114px;
    .left-box{
        .user-logo{
               display: flex;
               flex-direction: row;
               align-items: center;
               margin-bottom: 76px;
               img{
                   width: 126px;
                   height: 126px;
                   display: block;
                   border-radius: 50%;
                   margin-right: 20px;
               }
               .txt{
                   text-align: left;
                   h3{
                       font-size: 24px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #535353;
                   }
                   p{
                       font-size: 24px;
                        font-weight: normal;
                        font-stretch: normal;
                        letter-spacing: 0px;
                        color: #a6a5a3;                    
                   }
               }
        }
    }

    .neirongs{
       
        .van-cell::after{
            border: none;
        }
        .van-cell{
            padding: 23px 32px;
        }
        i{
          font-size: 38px;
          color: #a6a6b0;
          width: 55px;
        }
        .titleons{
            text-align: left;
            font-size: 24px;
            font-weight: normal;
            font-stretch: normal;
            letter-spacing: 0px;
            color: #a6a5a5;
            margin-left: 58px;
        }
    }
}
}
.lefts{
    position: relative;
    left: 500px;
}
.contains{     
        width: 750px;
        max-width: 750px;
        .search{
            padding: 0px 58px;
            .van-search{
                padding: 20px 0px;
            }
        }
        .van-search__action{
            padding: 0px;
        }
        .img-a1{
            width: 48px;
            height: 56px;
            display: block;
            margin-right: 76px;
        }

        .img-a2{
            width: 56px;
            height: 44px;
            display: block;
            margin-left: 70px;
        }
        .iconShapess{
            padding-left: 115px;
            font-size: 24px;
            color: #d1d1d1;
        }
        .van-field__control[type=search] {
            font-size: 24px;
            color: #cecece;
        }
        .van-tabs__nav--complete{
                padding: 0px 28px;
                margin-bottom: 10px;
        }  
    .van-grid-item__content{
        padding: 0px;
    }
    .van-tabs__content{
        padding: 0px 57px;
        text-align: left;
        overflow-y: auto;
        height: 80vh;
    }
    .van-nav-bar__right{
        right: 31%;
        padding-top: 22px;
    }
    .van-cell{
       line-height: 100%;
    }
    // 内容部分
    .main{
            .title-p{
                font-size: 32px;
                height: 32px;
                line-height: 32px;
                color: #484747;
            }
            .titiles{
                font-size: 28px;
            }
            .logos{
                width: 100%;
                height: 272px;
                display: block;             
                img{
                    border-radius: 6px;
                }
            }
            .ul-list{
                padding: 24px 10px 24px 10px;
            }
            .ul-list:nth-child(even){
                padding-right: 0px;
            }
            .ul-lis-img{
                width: 100%;
                height: 172px;       
                img{
                    border-radius: 20px;
                }
            }
            .van-tabs__line{
                bottom: 11px;
                width: 24px;
                height: 4px;
                left: -14px;
                background-color: #4a90e2;
            }
            .iconright-arrow{
                font-size: 30px;
                color: #a2a0a0;
            }
            .van-nav-bar__content{
                height: 100%;
               padding: 43px 0px 20px;
            }
            .van-hairline--bottom::after{
                border-bottom: 0px;
            }          
        }
}

.miaoshu{ 
    padding: 0px;
    h3{
        height: 23px;
        font-size: 23px;     
        color: #484747;
        font-weight: normal;
        margin-top: 18px;
        margin-bottom: 16px;
    }
    p{
        font-size: 20px;
        color: #9b9b9b;
    }
}
</style>
